<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Editable Table</title>

    <!--data table-->
    <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css"/>

    <!--引入公共的-->
    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common :: #leftmenu"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div th:replace="common :: headermenu"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                Editable Table
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Data Table</a>
                </li>
                <li class="active"> Editable Table</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            Editable Table
                            <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                        <a href="javascript:;" class="fa fa-times"></a>
                     </span>
                        </header>
                        <div class="panel-body">
                            <div class="adv-table editable-table ">
                                <div class="clearfix">
                                    <div class="btn-group">
                                        <button id="editable-sample_new" class="btn btn-primary">
                                            Add New <i class="fa fa-plus"></i>
                                        </button>
                                    </div>
                                    <div class="btn-group pull-right">
                                        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Tools <i
                                                class="fa fa-angle-down"></i>
                                        </button>
                                        <ul class="dropdown-menu pull-right">
                                            <li><a href="#">Print</a></li>
                                            <li><a href="#">Save as PDF</a></li>
                                            <li><a href="#">Export to Excel</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="space15"></div>
                                <table class="table table-striped table-hover table-bordered" id="editable-sample">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>学号</th>
                                        <th>姓名</th>
                                        <th>年龄</th>
                                        <th>性别</th>
                                        <th>手机号</th>
                                        <th>修改</th>
                                        <th>删除</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr id="addStudent" th:each="student,stat:${page.records}">
                                        <td th:text="${stat.count} + ${size} * (${page.current} - 1)"></td>
                                        <td id="id" th:text="${student.id}"></td>
                                        <td id="name" th:text="${student.name}"></td>
                                        <td id="age" th:text="${student.age}"></td>
                                        <td id="gender" th:text="${student.gender}"></td>
                                        <td id="phone" th:text="${student.phone}"></td>
                                        <!--                    <td class="center">Lorem ipsume</td>-->
                                        <td id="edit"><a class="edit" href="javascript:;">修改</a></td>
                                        <td id="delete">
                                            <a class="delete"
                                               th:href="@{/student/delete/{id}(id=${student.id},pn=${page.current})}">删除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="row-fluid">
                                    <div class="span6">
                                        <div class="dataTables_info" id="dynamic-table_info">
                                            当前第 [[${page.current}]] 页
                                            总计 [[${page.pages}]] 页
                                            共 [[${page.total}]] 条记录
                                        </div>
                                    </div>
                                    <div class="span6">
                                        <div class="dataTables_paginate paging_bootstrap pagination">
                                            <ul>
                                                <li>
                                                    <a th:href="@{/editable_table(pn=1)}">首页</a>
                                                </li>
                                                <li th:if="${page.hasPrevious()}">
                                                    <a th:href="@{/editable_table(pn=${page.current - 1})}">← 前一页</a>
                                                </li>
                                                <li th:class="${num==page.current?'active':''}"
                                                    th:each="num:${#numbers.sequence(1,page.pages)}">
                                                    <a th:href="@{/editable_table(pn=${num})}">[[${num}]]</a></li>
                                                <li th:if="${page.hasNext()}">
                                                    <a th:href="@{/editable_table(pn=${page.current + 1})}">后一页 →</a>
                                                </li>
                                                <li>
                                                    <a th:href="@{/editable_table(pn=${page.pages})}">末页</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2020 &copy; AdminEx by ThemeBucket </a>
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>

<!--data table-->
<script type="text/javascript" src="js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<script type="text/javascript">
    let id, name, age, gender, phone;

    function onChange(row) {
        row.children("#name").attr("contentEditable", "true");
        row.children("#name").attr("style", "border-radius:30px; background: #feffd7;");
        row.children("#age").attr("contentEditable", "true");
        row.children("#age").attr("style", "border-radius:30px; background: #feffd7");
        row.children("#gender").attr("contentEditable", "true");
        row.children("#gender").attr("style", "border-radius:30px; background: #feffd7");
        row.children("#phone").attr("contentEditable", "true");
        row.children("#phone").attr("style", "border-radius:30px; background: #feffd7");
    }

    function offChange(row) {
        row.children("#name").attr("contentEditable", "false");
        row.children("#name").attr("style", "");
        row.children("#age").attr("contentEditable", "false");
        row.children("#age").attr("style", "");
        row.children("#gender").attr("contentEditable", "false");
        row.children("#gender").attr("style", "");
        row.children("#phone").attr("contentEditable", "false");
        row.children("#phone").attr("style", "");
    }


    $(".edit").click(function (e) {
        let flag = $(e.currentTarget).text();
        let row = $(e.currentTarget).parent().parent();
        row.children("#delete").children(".delete").text("取消");
        if (flag === "修改") {
            // 修改样式
            $(e.currentTarget).text("保存");
            onChange(row);
            return;
        }
        if (flag === "保存") {
            // 改为默认样式
            $(e.currentTarget).text("修改");
            offChange(row);
            // 得到新值
            let id = row.children("#id").text();
            let name = row.children("#name").text();
            let age = row.children("#age").text();
            let gender = row.children("#gender").text();
            let phone = row.children("#phone").text();
            // ajax请求，更新数据
            $.ajax({
                data:
                    {
                        "id": id,
                        "name": name,
                        "age": age,
                        "gender": gender,
                        "phone": phone
                    },
                dataType: "json",
                url: "http://localhost:8080/student/update",
                success: function (res) {
                    alert("更新成功");
                }
            })
        }
        if (flag === "添加") {
            // ajax请求，更新数据
            // 得到新值
            let name = row.children("#name").text();
            let age = row.children("#age").text();
            let gender = row.children("#gender").text();
            let phone = row.children("#phone").text();
            $.ajax({
                data:
                    {
                        "name": name,
                        "age": age,
                        "gender": gender,
                        "phone": phone
                    },
                dataType: "json",
                url: "http://localhost:8080/student/save",
                success: function (res) {
                    confirm("添加成功！");
                    window.location.replace("http://localhost:8080/editable_table");
                }
            })
        }
    });

    $(".delete").click(function (e) {
        // 如果是删除，就删除，否则阻止默认事件
        if ($(e.currentTarget).text() === "删除") {
            if (confirm("确认删除吗？")) {
                return;
            } else {
                e.preventDefault();
            }
        } else {
            e.preventDefault();
        }
        let row = $(e.currentTarget).parent().parent();
        // 如果是添加的时候点击取消，则改为原来的值
        if (row.children("#edit").children(".edit").text() === "添加") {
            row.children("#id").text(id);
            row.children("#name").text(name);
            row.children("#age").text(age);
            row.children("#gender").text(gender);
            row.children("#phone").text(phone);
        }
        // 改为默认样式
        $(e.currentTarget).text("删除");
        row.children("#edit").children(".edit").text("修改");
        row.children("#id").attr("contentEditable", "false");
        row.children("#id").attr("style", "");
        offChange(row);
    });


    $("#editable-sample_new").click(function () {
        let row = $("#addStudent");
        id = row.children("#id").text();
        name = row.children("#name").text();
        age = row.children("#age").text();
        gender = row.children("#gender").text();
        phone = row.children("#phone").text();
        row.children("#edit").children(".edit").text("添加");
        row.children("#delete").children(".delete").text("取消");
        row.children("#id").text("********");
        onChange(row);
        row.children("#name").text(" ");
        row.children("#age").text(" ");
        row.children("#gender").text(" ");
        row.children("#phone").text(" ");
    });

</script>

<!-- END JAVASCRIPTS -->


</body>
</html>
